<template>
    <div class="page-container">
        <!-- 新增反馈按钮 -->
        <div class="header">
            <el-button type="primary" @click="showAddDialog">新增反馈</el-button>
        </div>

        <!-- 反馈列表 -->
        <el-table :data="feedbackList" style="width: 100%">
            <el-table-column prop="title" label="标题" width="180" />
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="type" label="类型" width="100">
                <template #default="{row}">
                    <el-tag :type="row.type === '建议' ? 'success' : 'warning'">
                        {{ row.type }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="提交时间" width="180" />
            <el-table-column label="操作" width="120">
                <template #default="{row}">
                    <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增反馈弹窗 -->
        <el-dialog v-model="dialogVisible" title="新增反馈">
            <el-form :model="formData" :rules="rules" ref="formRef">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="formData.title" placeholder="请输入标题" />
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select v-model="formData.type" placeholder="请选择类型">
                        <el-option label="建议" value="建议" />
                        <el-option label="问题" value="问题" />
                    </el-select>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input 
                        v-model="formData.content" 
                        type="textarea" 
                        :rows="4" 
                        placeholder="请输入详细内容" 
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 反馈列表数据
const feedbackList = ref([
    {
        title: '优化建议',
        content: '希望增加搜索功能',
        type: '建议',
        createTime: '2024-03-20 14:30'
    }
])

// 表单数据
const formData = reactive({
    title: '',
    type: '',
    content: ''
})

// 表单验证规则
const rules = {
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    type: [{ required: true, message: '请选择类型', trigger: 'change' }],
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
}

// 弹窗控制
const dialogVisible = ref(false)
const formRef = ref(null)

const showAddDialog = () => {
    dialogVisible.value = true
}

const handleSubmit = async () => {
    try {
        await formRef.value.validate()
        feedbackList.value.unshift({
            ...formData,
            createTime: new Date().toLocaleString()
        })
        ElMessage.success('提交成功')
        dialogVisible.value = false
        formRef.value.resetFields()
    } catch (error) {
        console.log('表单验证失败')
    }
}

const handleDelete = (row) => {
    ElMessageBox.confirm('确认删除该反馈？', '提示', {
        type: 'warning'
    }).then(() => {
        const index = feedbackList.value.indexOf(row)
        feedbackList.value.splice(index, 1)
        ElMessage.success('删除成功')
    })
}
</script>

<style lang="scss" scoped>
.header {
    margin-bottom: 20px;
    text-align: right;
    // padding: 10px;
    // background: #fff;
    // border-radius: 8px;
    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-container {
    padding: 20px;
    // background-color: #f5f7fa;
}
</style>